<template>
  <div>
      <!--编写Ant Design组件-->
    <a-layout style="color: rgba(255,255,255,0)">
      <a-layout-sider style="background: rgba(255,255,255,0)">
        <template>
        <a-tree show-line @select="onCheck" :tree-data="goodsTypeTree">
        </a-tree>
      </template></a-layout-sider>
      <a-layout>
        <a-layout-header style="background: rgba(255,255,255,0)">
          <a-form-model v-show="show">
            <a-row>
              <a-col :span="4">
                <a-button  icon="plus" @click="addGoods">添加</a-button>
              </a-col>
              <a-col :span="12">
                商品名称：<a-input v-model="good" style="width: 40%"/><a-button  icon="search" @click="search">搜索</a-button>
              </a-col>
            </a-row>
          </a-form-model>
        </a-layout-header>
        <a-layout-content>
          <div v-show="show">
            <a-table :columns="goods" :data-source="goodsData" bordered>
              <span slot="action" slot-scope="text, record">
                <a @click="handleEdit(record)">编辑</a>
                <a-divider type="vertical" />
                <a @click="handleDelete(record)">删除</a>
              </span>
            </a-table>
          </div>

        </a-layout-content>
      </a-layout>
    </a-layout>

    <!--新增商品弹窗-->
    <a-modal
      title="添加商品"
      :visible="goodsVisible"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model :model="goodsByOne">
        <a-row>
          <a-col :span="12">
            商品类别：<a-select v-model="goodsByOne.goodsTypeId" placeholder="请选择商品类型" style="width: 50%">
                <a-select-option v-for="type in goodsTypeList" :key="type.goodsTypeId">
                  {{type.goodsTypeName}}
                </a-select-option>
              </a-select>
          </a-col>
          <a-col :span="12">
            商品编号：<a-input v-model="goodsByOne.goodsCode" style="width: 60%"/>
          </a-col>
          <br/>
          <a-col :span="24">
            商品名称：<a-input v-model="goodsByOne.goodsName" style="width: 80%"/>
          </a-col>
          <br/>
          <a-col :span="12">
            商品型号：<a-input v-model="goodsByOne.goodsModel" style="width: 60%"/>
          </a-col>
          <a-col :span="12">
            商品单位：<a-select v-model="goodsByOne.goodsUnit" placeholder="请选择商品单位" style="width: 50%">
            <a-select-option v-for="unit in unitData" :key="unit.unijxcName">
              {{unit.unijxcName}}
            </a-select-option>
          </a-select>
          </a-col>
          <a-col :span="12">
            采购价格：<a-input v-model="goodsByOne.purchasingPrice" style="width: 60%"/>
          </a-col>
          <a-col :span="12">
            销售价格：<a-input v-model="goodsByOne.sellingPrice" style="width: 60%"/>
          </a-col>
          <a-col :span="12">
            库存下限：<a-input v-model="goodsByOne.minNum" style="width: 60%"/>
          </a-col>
          <a-col :span="24">
            生产厂商：<a-input v-model="goodsByOne.goodsProducer" style="width: 80%"/>
          </a-col>
          <a-col :span="24">
            备注：<a-input v-model="goodsByOne.remarks" style="width: 80%"  type="textarea"/>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>

  </div>
</template>

<script>
    //定义引入的js插件
    import {getAction,postAction,putAction,deleteAction} from "@/api/manage";
    import { axios } from '@/utils/request'
    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";

    const goods=[
      {
        title: '编号',
        dataIndex: '',
        key:'rowIndex',
        width:60,
        align:"center",
        customRender:function (t,r,index) {
          return parseInt(index)+1;
        }
      },
      {
        title:'商品编码',
        dataIndex:'goodsCode'
      },
      {
        title:'商品名称',
        dataIndex:'goodsName'
      },
      {
        title:'商品型号',
        dataIndex:'goodsModel'
      },
      {
        title:'商品类型',
        dataIndex:'goodsTypeName'
      },
      {
        title:'商品单位',
        dataIndex:'goodsUnit'
      },
      {
        title:'采购价格',
        dataIndex:'purchasingPrice'
      },
      {
        title:'出售价格',
        dataIndex:'sellingPrice'
      },
      {
        title:'库存下限',
        dataIndex:'minNum'
      },
      {
        title:'生产厂商',
        dataIndex:'goodsProducer'
      },
      {
        title: '操作',
        dataIndex: 'action',
        align:"center",
        fixed:"right",
        scopedSlots: { customRender: 'action' }
      }
    ];
    const unit=[
      {
        title: '编号',
        dataIndex: '',
        key:'rowIndex',
        width:60,
        align:"center",
        customRender:function (t,r,index) {
          return parseInt(index)+1;
        }
      },
      {
        title:'单位',
        dataIndex:'unijxcName'
      },
    ];

    export default {
      components: {ACol, ARow},
      data() {
            return {
                //定义组件中关联属性
              goodsTypeTree: [],
              goods,
              goodsData:[],
              show:false,
              goodsVisible:false,
              goodsByOne:{},
              goodsTypeList:[],
              unit,
              unitData:[],
              good:'',
              goodsId:'',
            }
        },
        methods: {
            //树节点点击事件
          onCheck(treeNode) {
            console.log(treeNode);
            this.goodsId=treeNode[0];
            this.show=true;
            if (treeNode[0]==undefined){
              return;
            }
            axios({//查询商品
              method: "get",
              url:"/goods/goodsList/"+treeNode[0],
              transformResponse:[function (data) {
                return JSON.parse(data);
              }],
            }).then((resp)=>{
              this.goodsData=resp;
            })
          },
          //添加商品
          addGoods(){
            this.goodsVisible=true;
            this.goodsByOne={};
            //搜索商品类别
            getAction("/goods/goodsType").then((resp)=>{
              this.goodsTypeList=resp
            });
            //搜索单位
            getAction("/unit/list").then((resp)=>{
              this.unitData=resp;
            })
          },
          //编辑
          handleEdit(record){
            this.goodsVisible=true;
            getAction("/goods/selectById/"+record.id).then((resp)=>{
              this.goodsByOne=resp;
            });
            getAction("/goods/goodsType").then((resp)=>{
              this.goodsTypeList=resp
            });
            //搜索单位
            getAction("/unit/list").then((resp)=>{
              this.unitData=resp;
            })
          },
          //提交表单
          handleOk(){
            this.goodsVisible=false;
            if (this.goodsByOne.id==null) {
              postAction("/goods/add", this.goodsByOne).then((resp) => {
                if (resp.success) {
                  this.$message.success(resp.message);
                  this.$emit('ok');
                } else {
                  this.$message.warning(resp.message);
                }
              });
            }else {
              putAction("/goods/putGoods",this.goodsByOne).then((resp)=>{
                console.log(resp)
              })
            }
            this.show=false;
            this.goodsByOne={};
          },
          //删除事件
          handleDelete(record){
            deleteAction("/goods/deleteById/"+record.id).then((resp)=>{
              this.show=false
            })
          },
          search(){

            axios({
              method: "get",
              url:"/goods/goodsList/"+this.goodsId+"?good="+this.good,
              transformResponse:[function (data) {
                return JSON.parse(data);
              }],
            }).then((resp)=>{
              this.goodsData=resp;
              this.good='';
            })
          },
          handleCancel(){
            this.goodsVisible=false
          }
        },
        created() {//页面加载前执行的操作
          getAction("/goodsType/stateTree").then((resp)=>{
            console.log(resp);
            this.goodsTypeTree=resp;
          })
        },
        mounted() {//页面加载后执行的操作

        }
    }
</script>